<template>
	<!-- 20230509 -->
	<view class="mall-my-order-list-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-20">
			<!-- 顶部栏 搜索和订单状态切换 -->
			<view class="jc-header width-100p bg-ff">
				<!-- #ifdef APP-PLUS -->
				<!-- 占位 view，避免页面内容出现在状态栏 -->
				<view class="height-status-bar"></view>
				<!-- #endif -->

				<!-- 带返回按钮的顶部条 搜索框 -->
				<view class="width-100p padding-lr-30 line-height-header flex align-center">
				
					<!-- #ifdef APP-PLUS -->
					<!-- 只有APP端显示返回按钮，其他端标题自带 -->
					<text class="margin-right-15 tyIcon-arrow-left text-44" @click="go(1,4)"></text>
					<!-- #endif -->
				
					<!-- 搜索框 -->
					<view class="width-100p">
						<ty-bar-search :value.sync="keyword" @search="search"></ty-bar-search>
					</view>
				</view>

				<!-- 订单状态切换 -->
				<view>
					<ty-tab-around :list="tabsList" :list-key="listKey" :active.sync="tabIndex" @click="changeTabs">
					</ty-tab-around>
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="margin-top-status-bar-header2-20">
				<ty-list-list :status="loadStatus">
					<view class="item margin-lr-30 margin-tb-20 radius-10 padding-lr-20 padding-top-10 padding-bottom-20 bg-ff"
						v-for="(item,index) in list" :key="index">
						
						<!-- 订单编号和状态 -->
						<view class="line-height-60 flex align-center justify-between">
							<view>
								<text class="tyIcon-list-1 text-30 text-4d"></text>
								<text class="text-24 text-4d">{{item.order_number}}</text>
							</view>
							<view class="text-26"
								:class="item.status == 8 || item.status == 5 || item.status == 7 ? 'text-4d' : 'text-main'">{{item.status_text}}</view>
						</view>
						
						<!-- 订单产品 -->
						<view class="padding-bottom-10" @click="go('/pages/mall/my/orderDetail?id=' + item.id)">
							<jc-mall-orderProducts :list="item.mallOrderProduct"></jc-mall-orderProducts>
						</view>
				
						<!-- 价钱合计 -->
						<view class="dashed-top-ed">
							<view class="line-height-80 flex align-center justify-end">
								<view class="text-26 text-77">
									共{{item.total_number}}件商品
								</view>
								<view class="margin-left-30">
									<text class="text-26 text-77">合计：</text>
									<text class="text-28">¥{{item.pay_money}}</text>
								</view>
							</view>
				
							<!-- 操作按钮 -->
							<view class="">
								<jc-mall-myOrderBtn :status="item.status" :order-id="item.id" :index="index"
									:pay-money="item.pay_money" :my-money="myMoney"
									:is-evaluate-add="item.is_evaluate_add" :type="1" 
									@del="del" @h5AliPay="h5AliPay"></jc-mall-myOrderBtn>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 支付宝H5支付组件 -->
			<ty-function-h5-alipay :raw-html="rawHtml"></ty-function-h5-alipay>
		</view>
	</view>
</template>

<script>
	import mall from "../api/mall.js"
	import money from '@/pages/money/api/money.js'
	export default {
		data() {
			return {
				// 搜索关键词
				keyword: '',
				// 订单状态 0--所有 1--待支付 2--待发货 3--待收货 4--待评价
				tabIndex: 0,
				// 下一页加载的标识，上一页已经加载到了这个ID
				lastId: '',
				// 当前列表加载状态 loading--加载中 finished--加载完成 nodata--没有数据 hasError--加载错误
				loadStatus: '',
				// 列表数据
				list: [],
				// 我的余额
				myMoney: 0,

				// 标签显示字段值
				listKey: 'name',
				// 订单状态标签栏
				tabsList: [{
					name: '全部',
					index: 0
				}, {
					name: '待支付',
					index: 1
				}, {
					name: '待发货',
					index: 2
				}, {
					name: '待收货',
					index: 3
				}, {
					name: '待评价',
					index: 4
				}],
				// H5支付宝支付表单
				rawHtml: ''
			}
		},

		onLoad(options) {
			this.tabIndex = options.index || 0
		},

		onShow() {
			this.loadList(1)
		},

		onReady() {
			
			// #ifdef H5
			if (this.cn.userAgent() == 'weixin') {
				// 兼容微信公众号支付路径，避免报错“当前URL未注册”
				this.cn.curUrlReload()
			}
			
			// 是否为跳转H5支付返回
			if (this.cn.userAgent() == 'h5') {
				// H5微信支付时，已跳转H5微信支付页面
				if (uni.getStorageSync('hasOpenMwebUrl')) {
					uni.removeStorageSync('hasOpenMwebUrl')
					// 弹窗提示
					this.cn.confirm('请确认支付是否已完成', "已取消支付", "已完成支付").then(res => {
						uni.redirectTo({
							url: '/pages/integral/my/orderList'
						})
					})
				}
			}
			// #endif
			
			// 获取我的余额
			money.getMyMoney().then(res => {
				if (res.code == 0) {
					this.myMoney = res.data.my.money
				}
			})
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			/**
			 * 搜索
			 * @date 2023-02-01
			 */ 
			search() {
				this.loadList(1)
			},

			/**
			 * 切换标签
			 * @date 2023-02-01
			 */ 
			changeTabs(e) {
				this.loadList(1)
			},

			/**
			 * 支付宝H5支付
			 * @date 2023-02-01
			 */ 
			h5AliPay(e) {
				this.rawHtml = e.rawHtml
			},

			/*
			 * 订单删除
			 * @date 2022-04-29
			 */
			del(e) {
				let list = this.list
				list.splice(e.index, 1)
				this.list = list
			},
			
			/**
			 * 获取我的订单列表
			 * @param {int} isFirstPage 是否首页 0--不是 1--是
			 * @date 2023-02-01
			 */
			loadList(isFirstPage) {
				mall.order.listMyOrder(this, isFirstPage, this.tabIndex, this.keyword)
			},
		}
	}
</script>

<style scoped>

</style>
